<template>
  <div class="app-container">
    <secondary @reset="reset" />
    <div class="filter-container">
      <span class="filter-title filter-item">饰品品质</span>
      <k-select
        v-model="listQuery.rarityId"
        class="filter-item babyquality"
        type="1"
        :select-params="dict.type.ORNAMENT_QUALITY"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">饰品外观</span>
      <k-select
        v-model="listQuery.exteriorId"
        class="filter-item babylook"
        type="1"
        :select-params="dict.type.ORNAMENT_APPEARANCE"
        @handleSelectEvent="handleFilter"
      />

      <span class="filter-title filter-item">饰品类别</span>
      <k-select
        v-model="listQuery.qualityId"
        class="filter-item babytype"
        :select-params="dict.type.ORNAMENT_CATEGORY"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">饰品分类</span>
      <k-select
        v-model="listQuery.typesId"
        class="filter-item babycategory"
        :custom-params="{opations:categoryList, label:'lineName',value:'lineId'}"
        @handleSelectEvent="handleCategoryFilter"
      />
      <k-select
        v-model="listQuery.typeId"
        class="filter-item babycategory"
        :custom-params="{opations:categorySecondTypeList, label:'lineName',value:'lineId'}"
        @handleSelectEvent="handleFilter"
      />
      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="饰品名称或关键词"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />

    </div>
    <div class="top-right-btn-container">
      <k-button v-if="authorityHandle(39)" class="top-btn" value="添加饰品" @click.native="addBabyDialog" />
      <k-button v-if="authorityHandle(39)" class="top-btn" value="删除饰品" @click.native="deleteBabyDialog" />
      <k-button class="top-btn" value="玩法配置" @click.native="openPlayRulesDialog" />
      <!-- <k-button class="top-btn" value="玩法介绍" @click.native="ruleGuideDialog" /> -->
      <k-button class="top-right-btn" value="设置" @click.native="settingDialog" />
    </div>
    <!--表格相关 -->
    <el-table
      :data="babylist"
      fit
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <el-table-column v-if="authorityHandle(39)" min-width="60px" type="selection" align="center" />
      <el-table-column width="60px" label="序号" type="index" align="center" />
      <el-table-column min-width="100px" label="图标" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 80px"
            :src="scope.row.iconUrl"
            :preview-src-list="[scope.row.iconUrl]"
            fit="contain"
          />
        </template>
      </el-table-column>
      <el-table-column prop="goodsCnName" min-width="120px" label="饰品名称" show-overflow-tooltip align="center" />
      <el-table-column label="扎比特数据" align="center">
        <el-table-column prop="zbtMinPrice" label="最低价" min-width="80" sortable="custom" align="center" />
        <el-table-column prop="zbtSellNum" label="当前数量" min-width="80" sortable="custom" align="center" />
      </el-table-column>
      <el-table-column prop="zbtOfficialPrice" min-width="80px" label="参考价" sortable="custom" show-overflow-tooltip align="center" />

      <el-table-column v-if="authorityHandle(39)" prop="customPrice" min-width="120px" label="自定义价格" sortable="custom" align="center">
        <template slot-scope="scope">
          <div @click="{{changeNum(scope.$index)}}">
            <el-input v-if="editable[scope.$index]" v-model="scope.row.customPrice" v-focus @keyup.enter.native="upcustomPrice(scope)" @blur="blurInput(scope.$index)" />
            <span v-else :style="{'color':scope.row.isUpdate === 2 ? '#3b425d':'#409EFF'}">{{ scope.row.customPrice }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column v-else prop="customPrice" min-width="120px" label="自定义价格" sortable="custom" align="center" />

      <el-table-column prop="typesName" min-width="100px" label="分类(父级)" show-overflow-tooltip align="center" />
      <el-table-column prop="typeName" min-width="100px" label="分类(子级)" show-overflow-tooltip align="center" />
      <el-table-column prop="rarityName" min-width="100px" label="品质" show-overflow-tooltip align="center" />
      <el-table-column prop="exteriorName" min-width="100px" label="外观" show-overflow-tooltip align="center" />
      <el-table-column prop="qualityName" min-width="100px" label="类别" show-overflow-tooltip align="center" />
      <el-table-column min-width="150px" label="饰品状态" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <el-switch
              v-model="scope.row.upStatus"
              style="display: block; margin-right:20px"
              active-color="#3b425d"
              inactive-color="#E9EBF2"
              active-text="上架"
              inactive-text="下架"
              :active-value="1"
              :inactive-value="2"
              :disabled="!authorityHandle(39)"
              @change="boxOnlineState(scope)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="120px" label="操作" align="center">
        <template slot-scope="scope">
          <k-button class="table-btn" value="查看/修改" @click.native="updateBabyDialog(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <!-- 添加饰品 弹窗 -->
    <k-dialog
      :show-hide.sync="addBaby.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="textMap[dialogStatus]"
      class="addBaby-dialog"
      :two-btn="authorityHandle(39)"
      :close-fun="handleCloseDialog"
      @click="addGoodsToReplace"
    >
      <div class="el_form">
        <el-form label-width="auto">
          <el-form-item label="添加饰品：">
            <el-select
              v-model="addGoodModel.goodsId"
              filterable
              :disabled="!authorityHandle(39)"
              placeholder="请选择"
              @change="selectChange"
            >
              <el-option
                v-for="item in goodsResultList"
                :key="item.lineId"
                :label="item.lineName"
                :value="item.lineId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="饰品父级分类：">
            {{ typeName }}
          </el-form-item>
          <el-form-item label="饰品子级分类：">
            <el-select v-model="addGoodModel.type" :disabled="!authorityHandle(39)" clearable placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
    <!-- 玩法介绍 弹窗 -->
    <k-dialog
      :show-hide.sync="ruleGuide.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="玩法介绍"
      class-name="ruleGuide-dialog"
      :show-foot="false"
      :two-btn="authorityHandle(39)"
      @click="guideSave"
    >
      <div class="dialog-ruleGuide" style="padding:30px">
        <el-form :model="ruleGuideContent" label-width="auto">
          <el-form-item label="内容介绍：" prop="content">
            <quill-editor
              ref="myQuillEditor"
              v-model.trim="ruleGuideContent.content"
              :options="editorOption"
              class="editer"
            />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
    <!-- 玩法配置 弹窗 -->
    <k-dialog
      :show-hide.sync="playRuleConfigShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="玩法配置"
      class="addBaby-dialog"
      :two-btn="authorityHandle(39)"
      :close-fun="handleCloseDialog"
      @click="replaceRulesSetting"
    >
      <el-radio-group v-model="playSettingType" fill="#3b425d" text-color="#ffffff" class="top-radio-group">
        <el-radio-button label="playone">玩法配置(玩家)</el-radio-button>
        <el-radio-button label="playtwo">玩法配置(主播)</el-radio-button>
      </el-radio-group>
      <div v-if="playSettingType === 'playone'" class="playrule_contanier">
        <ul>
          <li v-for="(playruleSettingItem, index) in playRuleSettingArray" :key="playruleSettingItem.id">
            <span class="warning-title">汰换阶段{{ index+1 }}：</span>
            <el-input v-model="playruleSettingItem.minPercent" :readonly="!authorityHandle(39)" class="price-input" />
            <i style="margin: 0 3px;"> — </i>
            <el-input v-model="playruleSettingItem.maxPercent" :readonly="!authorityHandle(39)" class="price-input" />

            <span class="warning-title-right">阶段概率：</span>
            <el-input v-model="playruleSettingItem.probability" :readonly="!authorityHandle(39)" clearable />%
            <i v-if="authorityHandle(39)" v-show="index != 0" class="el-icon-remove" @click="removeplayruleSettingItem(playruleSettingItem.id)" />
            <i
              v-if="authorityHandle(39)"
              v-show="index === playRuleSettingArray.length-1"
              class="el-icon-circle-plus"
              @click="addplayruleSettingItem"
            />
          </li>
        </ul>
        <span>期望利润百分比：{{ getExpectedProfit() }}</span>
      </div>
      <div v-else class="playrule_contanier">
        <ul>
          <li v-for="(playruleSettingItem, index) in playRuleSettingArray2" :key="playruleSettingItem.id">
            <span class="warning-title">汰换阶段{{ index+1 }}：</span>
            <el-input v-model="playruleSettingItem.minPercent" :readonly="!authorityHandle(39)" class="price-input" />
            <i style="margin: 0 3px;"> — </i>
            <el-input v-model="playruleSettingItem.maxPercent" :readonly="!authorityHandle(39)" class="price-input" />

            <span class="warning-title-right">阶段概率：</span>
            <el-input v-model="playruleSettingItem.probability" :readonly="!authorityHandle(39)" clearable />%
            <i v-if="authorityHandle(39)" v-show="index != 0" class="el-icon-remove" @click="removeplayruleSettingItem(playruleSettingItem.id)" />
            <i
              v-if="authorityHandle(39)"
              v-show="index === playRuleSettingArray2.length-1"
              class="el-icon-circle-plus"
              @click="addplayruleSettingItem"
            />
          </li>
        </ul>
        <span>期望利润百分比：{{ getExpectedProfit() }}</span>
      </div>
    </k-dialog>
    <!-- 设置 弹窗 -->
    <k-dialog
      :show-hide.sync="setting.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="setting_dialog"
      title="设置"
      :two-btn="authorityHandle(39)"
      @click="closeSettingDialog"
    >
      <el-radio-group v-model="settingType" fill="#3b425d" text-color="#ffffff" class="top-radio-group">
        <el-radio-button label="categorySetting">分类设置</el-radio-button>
        <el-radio-button label="ratioSetting">汰换配置</el-radio-button>
      </el-radio-group>
      <div v-if="settingType === 'categorySetting'" class="setting-contanier">
        <el-form label-width="auto">
          <el-form-item label="父级分类：">
            <el-tag
              v-for="(good, index) in categoryList"
              :key="good.lineId"
              :class="{activity:activityindex == index}"
              @click="tagclick(good, index)"
            >
              {{ good.lineName }}
            </el-tag>
          </el-form-item>
          <el-form-item label="子级分类：">
            <div class="box-container">
              <el-tag
                v-for="good in categorySecondTypeList"
                :key="good.lineId"
                :closable="authorityHandle(39)"
                :disable-transitions="false"
                @close="handleGoodsTagDelete(good)"
              >
                {{ good.lineName }}
              </el-tag>
              <el-input
                v-if="authorityHandle(39) && inputVisible"
                ref="saveTagInput"
                v-model="inputValue"
                class="input-new-tag"
                size="small"
                @blur="handleInputBlur"
                @keyup.enter.native="handleInputConfirm"
              />
              <el-button v-if="authorityHandle(39) && !inputVisible" class="button-new-tag" size="small" @click="addNewItemGood">
                + 添加分类
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div v-else class="ration_div">
        <el-form label-width="auto">
          <el-form-item label="汰换饰品件数：">
            <el-input v-model="replaceSetingModel.minCount" :readonly="!authorityHandle(39)" class="price-input" placeholder="请输入" />
            -
            <el-input v-model="replaceSetingModel.maxCount" :readonly="!authorityHandle(39)" class="price-input" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="汰换饰品最低价值：">
            <el-input v-model="replaceSetingModel.minPrice" :readonly="!authorityHandle(39)" class="middle-input" placeholder="请输入" />
          </el-form-item>
          <!-- <el-form-item label="合约下限：">
            <el-input v-model="replaceSetingModel.minPercent" class="middle-input" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="合约上限：">
            <el-input v-model="replaceSetingModel.maxPercent" class="middle-input" placeholder="请输入" />
          </el-form-item> -->
        </el-form>
      </div>
    </k-dialog>
  </div>
</template>

<script>
import { getGoodsPlatformList, getFirstTypeList, getSecondTypeListById, saveType, deleteType, getReplaceDescribe, setReplaceDescribe, getReplaceSetting, setReplaceSetting, listReplaceSetData, getTypeByGoodsId, addGoodsToReplace, deleteGoodsFromReplace, updateGoods, updateUpStatus, getReplaceProbability, setReplaceProbability, setReplaceProbabilityFission, getReplaceProbabilityFission } from '@/api/replace/index'
import { updateGoodsPrice } from '@/api/babylib/platformlib/listdata'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  components: { Pagination },
  dicts: ['ORNAMENT_QUALITY', 'ORNAMENT_APPEARANCE', 'ORNAMENT_CATEGORY'],
  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector('input').focus()
      }
    }
  },
  data() {
    return {
      replaceSetingModel: {
        minCount: undefined, // 最小件数',
        maxCount: undefined, // 最大件数',
        minPrice: undefined // 最低价值',
      },
      playRuleSettingArray: [
        {
          id: undefined,
          minPercent: '',
          maxPercent: '',
          probability: undefined
        }
      ],
      playRuleSettingArray2: [
        {
          id: undefined,
          minPercent: '',
          maxPercent: '',
          probability: undefined
        }
      ],
      settingType: 'categorySetting',
      playSettingType: 'playone',
      dialogStatus: 'create',
      textMap: {
        update: '修改/查看详情',
        create: '添加饰品'
      },
      activityindex: 0,
      addGoodModel: {
        goodsId: undefined,
        type: undefined
      },
      goodsResultList: [],
      goodsValueModel: [],
      checkedGiveBabyList: [],
      currParentId: undefined,
      typeName: '',
      customPrice: '',
      goodNameLook: '', // 查看修改显示的时候
      typeList: [],
      mathSettingModle: {
        pricePercent: undefined, // 价格差",
        minProbability: undefined, // 饰品最低概率",
        maxProbability: undefined, // 饰品最高概率",
        userPercent: undefined, // 玩家概率差值百分比",
        fissionPercent: undefined // 主播概率差值百分比"
      },
      rationCalculateModle: {
        goodsId: undefined,
        ammo: undefined, // 所需积分',
        price: undefined, // 所需金额',
        payType: undefined// 支付方式 1全晶粹|2全余额|3都有'
      },
      ruleGuideContent: {
        content: ''
      },
      editorOption: { //  富文本编辑器配置
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image'] // 上传图片、上传视频
          ]
        }
      },
      editable: [],
      categoryList: [],
      categorySecondTypeList: [],
      totalRows: 0, // 分页组件--数据总条数
      babylist: [], // 表格的数据
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        exteriorId: undefined, // 饰品外观',
        qualityId: undefined, // 饰品类别',
        rarityId: undefined, // 饰品品质',
        payType: undefined, // 兑换',
        key: '', // 饰品名称'
        typesId: undefined, // 饰品父分类",
        typeId: undefined // 饰品子分类"
      },
      inputVisible: false,
      inputValue: '',
      babyType: 'probability',
      probility: {
        prob: ''
      },
      playRuleConfigShow: false,
      mathSetting: {
        showHide: false
      },
      addBaby: {
        showHide: false
      },
      ruleGuide: {
        showHide: false
      },
      setting: {
        showHide: false
      },
      multipleSelection: []
    }
  },

  created() {
    this.loadData()
    this.getFirstTypeList()
    this.getGeneralDescribe()
  },
  beforeDestroy() {
    localStorage.setItem('pagination', '1')
  },
  methods: {
    getExpectedProfit() {
      const expectBulletNums = (this.playSettingType === 'playone' ? this.playRuleSettingArray : this.playRuleSettingArray2).map(item => {
        return (Number(item.minPercent) + Number(item.maxPercent)) / 2 * item.probability
      }).reduce(function(a, b) {
        return Number(a) + Number(b)
      })
      return (expectBulletNums / 100).toFixed(2)
    },
    removeplayruleSettingItem(value) {
      if (this.playSettingType === 'playone') {
        const index = this.playRuleSettingArray.findIndex(function(item) {
          return item.id === value
        })
        if (index !== -1) {
          this.playRuleSettingArray.splice(index, 1)
        }
      } else {
        const index = this.playRuleSettingArray2.findIndex(function(item) {
          return item.id === value
        })
        if (index !== -1) {
          this.playRuleSettingArray2.splice(index, 1)
        }
      }
    },
    addplayruleSettingItem() {
      if (this.playSettingType === 'playone') {
        this.playRuleSettingArray.push({
          id: undefined,
          minPercent: '',
          maxPercent: '',
          probability: undefined
        })
      } else {
        this.playRuleSettingArray2.push({
          id: undefined,
          minPercent: '',
          maxPercent: '',
          probability: undefined
        })
      }
    },
    replaceRulesSetting() {
      // const length = this.playRuleSettingArray.length
      // const minPercent = this.playRuleSettingArray[0].minPercent
      // const maxPercent = this.playRuleSettingArray[length - 1].maxPercent
      // this.$log(minPercent, maxPercent)
      // if (this.$isNullOrEmpty(minPercent) || this.$isNullOrEmpty(maxPercent)) return
      // if (parseFloat(minPercent) < this.replaceSetingModel.minPercent || parseFloat(maxPercent) > this.replaceSetingModel.maxPercent) {
      //   this.$message.error('不符合汰换配置合约上下限')
      //   return
      // }
      if (this.playSettingType === 'playone') {
        const probSum = this.playRuleSettingArray.map(item => {
          return item.probability
        }).reduce(function(a, b) {
          return Number(a) + Number(b)
        })
        this.$log(probSum)
        if (100 - Number(probSum).toFixed(5) !== 0) {
          this.$message.error('阶段概率和要等于100,还需要 ' + (100 - probSum).toFixed(5))
          return
        }
        setReplaceProbability(this.playRuleSettingArray).then(res => {
          this.$message.success('设置成功')
          this.playRuleConfigShow = false
        })
      } else {
        const probSum = this.playRuleSettingArray2.map(item => {
          return item.probability
        }).reduce(function(a, b) {
          return Number(a) + Number(b)
        })
        this.$log(probSum)
        if (100 - Number(probSum).toFixed(5) !== 0) {
          this.$message.error('阶段概率和要等于100,还需要 ' + (100 - probSum).toFixed(5))
          return
        }
        setReplaceProbabilityFission(this.playRuleSettingArray2).then(res => {
          this.$message.success('设置成功')
          this.playRuleConfigShow = false
        })
      }
    },
    openPlayRulesDialog() {
      this.playRuleConfigShow = true
      getReplaceProbability().then(res => {
        this.playRuleSettingArray = res.data
      })
      getReplaceProbabilityFission().then(res => {
        this.playRuleSettingArray2 = res.data
      })
      this.getReplaceSetting()
    },
    loadData(val) {
      if (val) {
        localStorage.setItem('pagination', val.page)
      }
      listReplaceSetData(this.listQuery).then(res => {
        const data = res.data
        this.babylist = data.rows
        this.totalRows = data.totalRows
      })
    },
    // 箱子上架
    boxOnlineState(scope) {
      const id = scope.row.id
      updateUpStatus({ 'goodsId': id }).then(res => {
        this.$log(res)
      })
    },
    // 添加饰品  请求饰品
    getGoodsPlatformList() {
      getGoodsPlatformList().then(res => {
        this.goodsResultList = []
        Object.assign(this.goodsResultList, res.data)
      })
    },
    // 设置 父级分类点击
    tagclick(good, index) {
      this.currParentId = good.lineId
      this.currTypeName = good.lineName
      this.activityindex = index
      this.getSecondTypeListById(this.currParentId)
    },
    // 添加新的饰品
    addNewItemGood() {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputBlur() {
      this.inputVisible = false
      this.inputValue = ''
    },
    //  确定添加新的专区保存专区
    handleInputConfirm() {
      const inputValue = this.inputValue
      this.inputVisible = false
      this.inputValue = ''
      if (!inputValue) return
      const parentId = this.currParentId
      if (parentId === undefined) {
        return
      }
      saveType({ parentId: parentId, typeName: inputValue }).then(res => {
        if (res.data.success) {
          const id = res.data.data
          const addBabyInfo = {}
          addBabyInfo.lineId = id
          addBabyInfo.lineName = inputValue
          this.categorySecondTypeList.push(addBabyInfo)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // 删除饰品
    handleGoodsTagDelete(tag) {
      this.$log(tag.lineId)
      if (!tag.lineId) {
        this.$message.error('删除失败')
        return
      }
      deleteType({ 'id': tag.lineId }).then(res => {
        if (res.data.success) {
          this.categorySecondTypeList.splice(this.categorySecondTypeList.indexOf(tag), 1)
          this.$message.success('删除成功')
        } else {
          this.$message.warning(res.data.msg)
        }
      })
    },
    // 自定义价格
    upcustomPrice(scope) {
      const index = scope.$index
      this.blurInput(index)
      const price = scope.row.customPrice
      const id = scope.row.id
      updateGoodsPrice({ id: id, customPrice: price, readyStatus: false }).then(res => {
        this.$log('价格修改成功')
        if (res.data.success) {
          scope.row.isUpdate = 2
        } else {
          const data = {
            show: true,
            type: 1,
            name: scope.row.goodsCnName,
            data: res.data,
            info: {
              id: id,
              customPrice: price
            }
          }
          this.$store.commit('secondary/SET_SECONDARYDATA', data)
        }
      })
    },

    // 重新获取
    reset() {
      this.loadData()
    },

    blurInput(index) {
      this.editable[index] = false
      this.$set(this.editable, index, false)
    },
    changeNum(index) {
      this.editable[index] = true
      this.$set(this.editable, index, true)
    },
    // 添加饰品 房里边的饰品选择事件
    selectChange(value) {
      getTypeByGoodsId({ 'goodsId': value }).then(res => {
        this.typeList = res.data.typeList
        this.typeName = res.data.typeName
        this.customPrice = res.data.customPrice
      })
    },
    payTypeChanged(value) {
      if (value === 1) {
        this.addGoodModel.price = 0
      } else if (value === 2) {
        this.addGoodModel.ammo = 0
      }
      this.getPriceMsgByGoodsId(this.rationCalculateModle)
    },
    // 保存添加饰品
    addGoodsToReplace() {
      this.$log(this.addGoodModel)
      if (!this.addGoodModel.goodsId || !this.addGoodModel.type) {
        this.$message.error('数据出错')
        return
      }
      if (this.dialogStatus === 'create') {
        addGoodsToReplace(this.addGoodModel).then(res => {
          this.$message.success('保存成功')
          this.addBaby.showHide = false
          this.handleFilter()
        })
      } else {
        updateGoods(this.addGoodModel).then(res => {
          this.$message.success('修改成功')
          this.handlePageFilter()
        })
      }
      this.addBaby.showHide = false
    },
    // 获取饰品分类
    getFirstTypeList() {
      getFirstTypeList().then(res => {
        const data = res.data
        if (data.length <= 0) return
        this.categoryList = data
        this.currParentId = data[0].lineId
      })
    },
    closeSettingDialog() {
      this.setting.showHide = false
      if (this.settingType === 'ratioSetting') {
        setReplaceSetting(this.replaceSetingModel).then(res => {
          this.$message.success('保存成功')
        })
      }
    },
    // 由id获取2级分类
    getSecondTypeListById(id) {
      getSecondTypeListById({ id: id }).then(res => {
        this.categorySecondTypeList = []
        const data = res.data
        this.categorySecondTypeList = data
        this.$log(this.categorySecondTypeList)
      })
    },
    handleCategoryFilter(value) {
      this.handleFilter()
      this.getSecondTypeListById(value)
    },
    handlePageFilter() {
      this.listQuery.pager.pageNo = Number(localStorage.getItem('pagination')) || 1
      this.loadData()
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    },
    // 选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 表格的排序条件发生变化的时候会触发该事件
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop
      if (column.order === 'ascending') {
        this.listQuery.direction = 'asc'
      } else if (column.order === 'descending') {
        this.listQuery.direction = 'desc'
      }
      this.loadData()
    },
    handleCloseDialog() {

    },
    updateBabyDialog(row) {
      this.dialogStatus = 'update'
      this.addBaby.showHide = true
      this.typeName = row.typeName
      this.goodNameLook = row.goodsCnName
      this.customPrice = row.customPrice
      this.addGoodModel.goodsId = row.id
      this.addGoodModel.type = row.typeId
      this.goodsResultList = [{ lineId: row.id, lineName: this.goodNameLook }]
      this.selectChange(this.addGoodModel.goodsId)
    },
    addBabyDialog() {
      this.getGoodsPlatformList()
      this.dialogStatus = 'create'
      this.typeName = ''
      this.customPrice = ''
      this.typeList = []
      this.addGoodModel.goodsId = undefined
      this.addGoodModel.type = undefined
      this.addBaby.showHide = true
    },
    getPriceMsgByGoodsId(rationCalculateModle) {
      if (this.addGoodModel.goodsId === undefined || !this.addGoodModel.goodsId) return
      this.rationCalculateModle.goodsId = this.addGoodModel.goodsId
      // getPriceMsgByGoodsId(rationCalculateModle).then(res => {
      //   this.addGoodModel.ammo = res.data.ammo
      //   this.addGoodModel.price = res.data.price
      // })
    },
    // 设置窗口
    settingDialog() {
      this.getSecondTypeListById(this.currParentId)
      this.getReplaceSetting()
      this.setting.showHide = true
    },
    getReplaceSetting() {
      getReplaceSetting().then(res => {
        this.replaceSetingModel = res.data
      })
    },
    ruleGuideDialog() {
      this.ruleGuide.showHide = true
    },
    deleteBabyDialog() {
      const _vue = this
      if (_vue.multipleSelection.length < 1) {
        this.$message.error('请至少选择一条数据进行删除！')
        return
      }
      const selections = _vue.multipleSelection
      this.$confirm('确定删除选中的饰品么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var ids = []
        for (var i = 0; i < selections.length; i++) {
          ids.push(selections[i].id)
        }
        deleteGoodsFromReplace({ ids: ids }).then(res => {
          if (res.data.success) {
            this.$message.success('删除成功')
            this.loadData()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 保存玩法管理
    guideSave() {
      setReplaceDescribe({ 'data': this.ruleGuideContent.content }).then(res => {
        this.$message.success('保存成功')
        this.ruleGuide.showHide = false
      })
    },
    // 加载玩法管理
    getGeneralDescribe() {
      getReplaceDescribe().then(res => {
        this.ruleGuideContent.content = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText:#14162E; // 侧边栏字体颜色
$hoverColor:#1D143C;// 鼠标停留主色调浅色
$mainColor:#3b425d;// 主色调
.app-container {
  padding: 30px;
}

.setting-contanier {
  padding: 50px;
  .box-container{
    padding: 20px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .el-tag {
    color: $mainColor;
    background-color: #ffffff;
    border-color: $mainColor;
    ::v-deep .el-tag__close {
      color: $mainColor;
    }
    ::v-deep .el-icon-close:hover {
      color:#ffffff;
      background: $mainColor;
    }
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    &:hover {
      color: #ffffff;
      background: $mainColor;
    }
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  ::v-deep .el-input__inner:focus {
    border-color: $mainColor;
  }
  .activity{
      background-color: $mainColor;
      color: #ffffff;
       ::v-deep .el-tag__close {
        color: #ffffff;
      }
    ::v-deep .el-icon-close:hover {
        color: $mainColor;
        background: #ffffff;
      }
  }
}
.table-btn{
  width: 80px;
  height: 35px;
  line-height:35px;
  padding: 0;
  background: #e7ecf8;
  border: 1px solid #3b425d;
  border-radius: 8px;
  font-size: 14px;
  color: #3b425d;
  &:hover{
    background: $mainColor;
    color: #fff;
  }
}
.addBaby-dialog{
  ::v-deep .el-dialog__body{
    margin: 10px 50px;
  }
  .playrule_contanier{
    ::v-deep.el-input{
        width: 110px;
      }
      .price-input{
        width: 120px;
      }
    .el-icon{
        &-circle-plus, &-remove{
          font-size: 22px;
          color:#3b425d;
          margin-left: 10px;
      }
    }
    ul {
      list-style-type:none;
      margin:0;
      padding:0;
      li{
        margin: 0 0 30px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .warning-title {
          font-size: 16px;
          color: #14162E;
          &-right{
            font-size: 16px;
            color: #14162E;
            margin-left: 80px;
          }
          &-right2{
            font-size: 16px;
            color: #14162E;
            margin-left: 20px;
          }
        }
        i{
          color: #D1D5DD;
        }
      }
    }
  }
  .el_form{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}
.middle-input{
  width: 250px;
}
.setting_dialog{
    ::v-deep .el-dialog__body{
      width: 1000px;
    }
    .ration_div{
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin: 30px;
      .price-input{
        width: 120px;
      }
    }
}
.addBox-dialog{
  ::v-deep .el-dialog__body{
    width: 678px;
    text-align: center;
  }
  .give_div{
    margin: 0 auto;
    padding: 50px 0px;
    height: 400px;
  }
}
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .kInput {
    position:absolute;
    right: 20px;
  }
  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }
  .babyquality {
    margin-right: 20px;
  }
  .babylook,.babycategory ,.babytype {
    margin-right: 20px;
  }
}
.top-btn {
  margin: 30px 20px 30px 0px;
  font-size: 14px;
  color: #ffffff;
}
.upload-btn {
  font-size: 14px;
  color: #ffffff;
}
::v-deep .kSelect .el-select .el-input .el-input__inner {
  width: 150px;
}

.top-radio-group{
  margin-bottom: 40px;
}

::v-deep .el-dialog__body{
    padding: 10px 30px;
}
::v-deep .el-radio-button__inner{
  &:hover{
    color: $mainColor;
  }
}
.giveBaby-dialog{
   ::v-deep .el-dialog__body{
    width: 678px;
    height: 500px;
  }
  .dialog-giveBabySetting{
    ::v-deep.el-input{
      width: 200px;
    }
    .price-input{
      width: 120px;
    }
  }
}

.top-right-btn-container{
  position: relative;
  .top-right-btn{
    position: absolute;
    right: 20px;
    top: 30px;
    background-color: #F8F7FB;
    border-color: transparent;
    color: #14162E;
    &:hover{
      color: #ffffff;
      background-color: $mainColor;
    }
    &:active{
      color: #14162E;
    }
  }
}
.editer {
  width: 500px;
  border-radius: 8px;
  float: left;
  box-sizing: border-box;
  color: #606266;
  ::v-deep .ql-container {
    height: 400px;
    border-radius: 0px 0px 8px 8px;
  }
  ::v-deep .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0px 0px;
  }
}

</style>
